<template>
	<view>
		<view class="bg"></view>
		<head-navbar :back="true" :bgColor="'none'">
			<view slot="right">
				<text style="color: #FFFFFF;" @click="toPage(0,'/pages/group/new')">查看子账号</text>
			</view>
		</head-navbar>
		<view class="contentBox">
			<view class="box">
				<view class="title">
					<image src="../../static/img/clock.png"></image>
					<view class="text">{{count}}</view>
				</view>
				<view class="goods">
					<image v-if="goods.img" :src="goods.img" class="left"></image>
					<image v-else  class="left" src="../../static/img/defoult.jpg"></image>
					<view class="right">
						<view class="top">
							<view class="name">{{goods.title}}</view>
							<view class="tip">{{goods.brief}}</view>
						</view>
						<view class="price">{{goods.grade}}</view>
					</view>
				</view>
			</view>
			<view class="pintuanBtn":class="{pinBtn:btnStatus == '加载中' || '等待团开启',pinBtn2:btnStatus == '立即参团'}" @click="toJoin">{{btnStatus}}</view>
			<view class="midTip">今日达人奖项奖金为：{{prize}}钻石</view>
			<view class="daren">
				<view class="notice">
					<view class="item">
						<!-- <view class="pic">
							<image src="../../static/img/notice.png" mode=""></image>
						</view> -->
						<swiper class="list" vertical="true" autoplay="true" circular="true" interval="2000">
							<swiper-item v-for="(item, index) in list" :key="index">
								<text style="font-size: 24upx;">{{ item }}</text>
							</swiper-item>
						</swiper>
					</view>
				</view> 
			</view>
			<view class="liucheng">
				<view class="item">
					<image class="logo" src="../../static/img/canjia.png"></image>
					<view class="text">参与拼团</view>
				</view>
				<image class="jiantou" src="../../static/img/jiantou.png"></image>
				<view class="item">
					<image class="logo" src="../../static/img/wait.png"></image>
					<view class="text">等待开团</view>
				</view>
				<image class="jiantou" src="../../static/img/jiantou.png"></image>
				<view class="item">
					<image class="logo" src="../../static/img/jiangli.png"></image>
					<view class="text">获取奖励</view>
				</view>
			</view>
			<view class="midTip"><rich-text :nodes="ruler"></rich-text></view>
			<view class="dibu">
				<view class="textBox" @click="toPage(0,'/pages/group/team')">团队</view>
				<view class="line"></view>
				<view class="textBox" @click="toPage(0,'/pages/group/ruler')">活动规则</view>
				<view class="line"></view>
				<view class="textBox" @click="toPage(0,'/pages/group/record')">参与记录</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '../../api/group/index'
	export default {
		data() {
			return {
				list:[
					  "恭喜pt000001成为2020年11月04日幸运达人，获得1000钻石",
					  "恭喜pt000002成为2020年11月04日幸运达人，获得1000钻石",
					  "恭喜pt000003成为2020年11月04日幸运达人，获得1000钻石"
				],
				goods: {
					img: null,
					title: null,
					brief: null,
					grade: null,
				},
				ruler:'',
				prize:0,
				groupBookLogId:'',
				startTime: null,
				btnStatus:'加载中',
				StdSchedulerFactory:null,
				count: '00：00：00',
			}
		},
		onLoad() {
			if(this.StdSchedulerFactory){
			    clearInterval(this.StdSchedulerFactory)
			}
			this.getNewGroupBookLog()
			this.getExplainById()
			this.getPrizePool()
			this.getDaRenList()
		},
		onUnload(){
			clearInterval(this.StdSchedulerFactory)
		},
		methods: {
		getDaRenList(){
			api.getDaRenList().then(res=>{
				this.list = res.data.dataBody
			}).catch(err=>{
				
			})
		},
		getPrizePool(){
			api.getPrizePool().then(res=>{
				this.prize = res.data.dataBody
			}).catch(err=>{
				
			})
		},
			getExplainById(){
				api.getExplainById({request:{id:1}}).then(res=>{
					this.ruler = res.data.dataBody.content
				}).catch(err=>{
					
				})
			},
			async getNewGroupBookLog() {
				try {
					const ret = await api.getNewGroupBookLog({})
					this.groupBookLogId = ret.data.dataBody.groupBookLogId
					var parmas = {
						request: {
							groupBookId: ret.data.dataBody.groupBookId
						}
					}
					if (ret.data.dataBody.state == 1) {
						this.getCutent(ret.data.dataBody.startTime * 1000,ret.data.dataBody.state)
						this.btnStatus = '等待团开启'
					} else if (ret.data.dataBody.state == 2) {
                        this.getCutent(ret.data.dataBody.upTime * 1000,ret.data.dataBody.state)
						this.btnStatus = '立即参团'
					} else if (ret.data.dataBody.state == 3) {
                        this.getCutent(ret.data.dataBody.endTime * 1000,ret.data.dataBody.state)
						this.btnStatus = '等待团开启'
					}
					const res = await api.loadGroupBookById(parmas)
					this.goods.img = res.data.dataBody.img
					this.goods.title = res.data.dataBody.title
					this.goods.brief = res.data.dataBody.brief
					this.goods.grade = res.data.dataBody.grade
				} catch{

				}
			},
			addZero(num) {
				if (num < 10) {
					return '0' + num
				} else {
					return num
				}
			},
			getCutent(endTime,state) {
				var that = this
				this.StdSchedulerFactory = setInterval(function() {
					var nowTime = new Date().getTime()
					var timeCha = endTime - nowTime
					if (timeCha > 0) {
						var hour = Math.floor(timeCha / 1000 / 60 / 60);
						var minute = Math.floor(timeCha / 1000 / 60 % 60);
						var second = Math.floor(timeCha / 1000 % 60);
						that.count = that.addZero(hour) + '：' + that.addZero(minute) + '：' + that.addZero(second)
					} else {
						clearInterval(that.StdSchedulerFactory)
						if(state == 1){
							that.btnStatus = '等待团开启'
						}else if(state == 2){
							that.btnStatus = '立即参团'
						}else if(state == 3){
							that.btnStatus = '等待团开启'
						}
						// uni.showToast({
						// 	title: '倒计时结束',
						// 	icon: 'none'
						// })
						setTimeout(function(){
							that.getNewGroupBookLog()
						},1000)
					}
				}, 1000)
			},
			toJoin(){
				if(this.btnStatus == '加载中' || this.btnStatus == '等待团开启'){
					uni.showToast({
						title:'暂未开启，请耐心等候',
						icon:'none'
					})
					return
				}
				var parmas = {
					request: {
						groupBookLogId: this.groupBookLogId
					}
				}
				api.exitsJoin(parmas).then(res=>{
					uni.navigateTo({
						url:'/pages/group/join?groupBookLogId=' + this.groupBookLogId + '&price='+this.goods.grade,
					})
				}).catch(err=>{
					
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url(../../static/img/pingtuanBg.png);
		background-size: cover;
		z-index: 0;
	}
	.daren{
	  margin-top: 20rpx;
	}
    .notice {
    	font-size: 26rpx;
    	width: 100%;
    	.item {
    		padding: 5rpx 0;
    		display: flex;
    		justify-content: space-around;
    		align-items: center;
    		 background: rgba(254,229,220,0.4);
    		position: relative;
            border-radius: 20rpx;
    		.pic {
    			display: flex;
    			justify-content: center;
    			align-items: center;
    
    			image {
    				width: 26rpx;
    				height: 25rpx;
					flex: none;
					margin-right: 20rpx;
    			}
    		}
    
    		.list {
				color: #ffff;
				text-align: center;
    			flex: auto;
    			height: 60rpx;
    			position: relative;
    			z-index: 900;
    
    			/deep/.uni-swiper-slides {
    				margin-rght: 20rpx;
    			}
    
    			text {
    				line-height: 60rpx;
    			}
    		}
    
    		.detial {
    			position: absolute;
    			right: 20rpx;
    			top: 50%;
    			transform: translateY(-50%);
    			z-index: 888;
    			width: 100rpx;
    			padding-right: 10rpx;
    			height: 100%;
    			font-size: 24rpx;
    			line-height: 26rpx;
    			color: #9c9c9c;
    			display: flex;
    			justify-content: flex-end;
    			align-items: center;
    
    			image {
    				width: 20rpx;
    				height: 27rpx;
    				margin-left: 15rpx;
    			}
    		}
    	}
    }
	.contentBox {
		padding: 30rpx;
		margin-top: 21vh;
		position: relative;
		z-index: 99;

		.box {
			position: relative;
			z-index: 99;
			background-image: url(../../static/img/boxBg.png);
			background-size: 100% 100%;
			height: 246rpx;

			.title {
				padding-top: 15rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 35rpx;
					height: 35rpx;
					margin-right: 20rpx;
				}

				.text {

					font-size: 30rpx;
					font-family: DINCondensedC;
					font-weight: 400;
					color: #F85803;
				}
			}

			.goods {
				display: flex;
				padding: 20rpx 30rpx;

				.left {
					width: 140rpx;
					height: 140rpx;
					margin-right: 20rpx;
					border-radius: 15rpx;
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.top {
						.name {
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #2B2B2B;
							overflow: hidden;

							text-overflow: ellipsis;

							display: -webkit-box;

							-webkit-box-orient: vertical;

							-webkit-line-clamp: 1;
						}

						.tip {
							margin-top: 5rpx;
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
							overflow: hidden;

							text-overflow: ellipsis;

							display: -webkit-box;

							-webkit-box-orient: vertical;

							-webkit-line-clamp: 2;
						}
					}

					.price {

						font-size: 35rpx;
						font-family: DINCond-Black;
						font-weight: 600;
						color: #F2520A;
					}
				}
			}
		}
	}

	.pintuanBtn {
		margin: 30rpx 50rpx;
		height: 90rpx;
		position: relative;
		z-index: 99;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 90rpx;
		text-align: center;
	}

	.midTip {
		text-align: center;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.liucheng {
		margin-top: 20rpx;
		margin-bottom: 30rpx;
		height: 200rpx;
		background: #FFF6F1;
		box-shadow: 1rpx 11rpx 40rpx 0px rgba(244, 244, 244, 0.52);
		opacity: 0.6;
		border-radius: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: #000000;

		.item {
			text-align: center;

			image {
				width: 75rpx;
				height: 75rpx;
			}
		}

		.jiantou {
			width: 80rpx;
			height: 25rpx;
			margin: 0 30rpx;
		}
	}

	.dibu {
		position: fixed;
		bottom: 50rpx;
		width: 100%;
		padding-top: 1rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.line {
			margin-top: 10rpx;
			width: 1px;
			height: 40rpx;
			background: #FFFFFF;
			margin: 0 60rpx;
		}

		.textBox {
			padding: 10rpx 10rpx;
			text-align: center;
			font-size: 28rpx;
			color: #FFFFFF;
			border-bottom: 1rpx solid #f4f4f4;
		}
	}
	.pinBtn{
		background-image: none;
		background: linear-gradient(180deg, #D0D0D0, #666666);
		border-radius: 100rpx;
		border: 1rpx soild #f4f4f4;
	}
	.pinBtn2{
		background-image: url(../../static/img/btnBg.png);
		border: none;
		background-size: 100% 100%;
		
	}
</style>
